<!DOCTYPE html>
<html>
<!-- 曾浩南 电影管理 -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>添加电影</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="../../layui/css/detail.css">
  <style>
    .imgs{
        margin-left: 110px;
        margin-top: 10px;
        position: relative;
        width:150px;
        height:150px;
        display: none;
    }
    .imgs i{
        position: absolute;
        right: 2px;
        top: 2px;
        color:#fff;
        z-index:1;
        cursor: pointer;
    }
    .imgs::after{
        content: "";
        position:absolute;
        height:20px;
        background:rgba(0,0,0,.5);
        top:0;
        left:0;
        width:100%;
        border-radius: 5px 5px 0 0;

    }
    .imgs img{
        width:100%;
        height:100%;
        display: block;
        object-fit: contain;
        border-radius:5px;
        border: 1px solid gray;
        box-sizing: border-box;
    }
</style>
</head>

<body class="layui-layout-body">

  <div class="layui-body inner-body">

    <!-- 内容主体区域 -->
    <fieldset class="layui-elem-field layui-field-title">
      <legend>
        <button class="layui-btn layui-btn-sm">
          <a href="../../pages/movieManagement.html">返回</a>
        </button>
        添加电影
      </legend>
    </fieldset>

    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">电影名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入电影名称" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">英文名称</label>
        <div class="layui-input-block">
          <input type="text" name="ename" lay-verify="required" placeholder="请输入电影英文名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">海报图</label>
        <div class="layui-input-block">
          <button type="button" class="layui-btn" id="btnPoster">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <div class="imgs" style="margin-left:0px">
            <img src="" alt="">
            <i class="layui-icon layui-icon-close"></i>
          </div>
          <div class="img-input" style="display:none">
            <input type="text" id="txtimg" name="poster">
          </div>
        </div>
      </div>

      <!-- 电影类型 -->
      <div class="layui-form-item">
        <label class="layui-form-label">电影类型</label>
        <div class="layui-input-block">
          <input type="checkbox" name="type" title="爱情" value="爱情">
          <input type="checkbox" name="type" title="喜剧" value="喜剧">
          <input type="checkbox" name="type" title="动画" value="动画">
          <input type="checkbox" name="type" title="剧情" value="剧情">
          <input type="checkbox" name="type" title="恐怖" value="恐怖">
          <input type="checkbox" name="type" title="惊悚" value="惊悚">
          <input type="checkbox" name="type" title="科幻" value="科幻">
          <input type="checkbox" name="type" title="动作" value="动作">
          <input type="checkbox" name="type" title="悬疑" value="悬疑">
          <input type="checkbox" name="type" title="犯罪" value="犯罪">
          <input type="checkbox" name="type" title="冒险" value="冒险">
          <input type="checkbox" name="type" title="战争" value="战争">
          <input type="checkbox" name="type" title="奇幻" value="奇幻">
          <input type="checkbox" name="type" title="运动" value="运动">
          <input type="checkbox" name="type" title="家庭" value="家庭">
          <input type="checkbox" name="type" title="古装" value="古装">
          <input type="checkbox" name="type" title="武侠" value="武侠">
          <input type="checkbox" name="type" title="西部" value="西部">
          <input type="checkbox" name="type" title="历史" value="历史">
          <input type="checkbox" name="type" title="传记" value="传记">
          <input type="checkbox" name="type" title="歌舞" value="歌舞">
          <input type="checkbox" name="type" title="黑色电影" value="黑色电影">
          <input type="checkbox" name="type" title="短片" value="短片">
          <input type="checkbox" name="type" title="记录片" value="记录片">
          <input type="checkbox" name="type" title="其他" value="其他">
        </div>
      </div>
      <!-- 首映地区 -->
      <div class="layui-form-item">
        <label class="layui-form-label">首映地区</label>
        <div class="layui-input-block">
          <input type="checkbox" name="area" title="中国大陆" value="中国大陆">
          <input type="checkbox" name="area" title="美国" value="美国">
          <input type="checkbox" name="area" title="韩国" value="韩国">
          <input type="checkbox" name="area" title="日本" value="日本">
          <input type="checkbox" name="area" title="中国香港" value="中国香港">
          <input type="checkbox" name="area" title="中国台湾" value="中国台湾">
          <input type="checkbox" name="area" title="泰国" value="泰国">
          <input type="checkbox" name="area" title="印度" value="印度">
          <input type="checkbox" name="area" title="法国" value="法国">
          <input type="checkbox" name="area" title="英国" value="英国">
          <input type="checkbox" name="area" title="俄罗斯" value="俄罗斯">
          <input type="checkbox" name="area" title="意大利" value="意大利">
          <input type="checkbox" name="area" title="西班牙" value="西班牙">
          <input type="checkbox" name="area" title="德国" value="德国">
          <input type="checkbox" name="area" title="波兰" value="波兰">
          <input type="checkbox" name="area" title="澳大利亚" value="澳大利亚">
          <input type="checkbox" name="area" title="伊朗" value="伊朗">
          <input type="checkbox" name="area" title="其他" value="其他">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">时长</label>
        <div class="layui-input-inline">
          <input type="text" name="time" placeholder="请输入电影时长" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">分钟</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">上映时间</label>
        <div class="layui-input-inline">
          <!-- <input type="text" class="layui-input" id="txtUpdate" name="upDate" lay-vertype="tips" lay-verify="required"
            lay-key="1"> -->

          <input type="text" name="upDate" class="layui-input" id="test29" placeholder="">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">评分</label>
        <div class="layui-input-inline">
          <input type="text" name="score" placeholder="请输入评分(0-10)" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">票房</label>
        <div class="layui-input-inline">
          <input type="text" name="count" placeholder="请输入票房" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">电影简介</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入电影简介" class="layui-textarea" name="intro"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="button" class="layui-btn" lay-submit="" lay-filter="movie-addMovie">添加电影</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>

  </div>
  <script src="../../layui/jquery-1.12.4.min.js"></script>
  <script src="../../layui/layui.js"></script>
  <script>
    //JavaScript代码区域
    $(".imgs i").click(function () {//关闭选中的图片
      $(".imgs img").prop("scr", "");
      $("#txtimg").val("");//清空隐藏框的值
      $(".imgs ").hide();
    })
    layui.use(['form', "layer", "laydate", 'upload'], function () {
      let form = layui.form;
      var laydate = layui.laydate;
      let upload = layui.upload;
      laydate.render({//上映时间
        elem: '#test29',
        theme: 'molv'
      });
      //执行实例
      var uploadInst = upload.render({
        elem: '#btnPoster', //绑定元素
        url: '/api/upload/', //上传接口
        field: "imgfile",
        acceptMime: "image/*",//控制上传文件--图片
        size: 500,//文件大小不能超过500kb
        drag: true,//拖拽上传
        done: function (res) {
          //上传完毕回调

          $(".imgs img").prop("src", res.data[0]);
          $("#txtimg").val(res.data[0]);
          $(".imgs").show();
          console.log(res);
        },
        error: function () {
          //请求异常回调
          console.log("错误")
        }
      });
      //提交
      form.on("submit(movie-addMovie)", async function (data) {

        delete data.field.imgfile;

        if (!data.field.poster) {
          layer.msg("请上传电影海报", {
            icon: 2,
          });
          return;
        }
        console.log(data.field);
        await $.post("/api/Movie", data.field);
        layer.msg('添加电影成功', {
          icon: 1,
          time: 1000
        }, function () {
          location.href = "../../pages/movieManagement.html";
        });

      });
    });
  </script>
</body>

</html>